<template>
    <!-- 表格视图 -->
    <el-table v-if="store.getViewType === 1" class="tables" :data="data" :key="key" @selection-change="handleSelectionChange"
        @row-click="handleRowClick" :max-height="maxHeight" ref="tableRef">
        <el-table-column type="selection" width="55" />
        <slot name="dynamic-columns" />
        <!-- <el-table-column :label="$t('assets.tabel.operate')" align="right" class-name="tableOperate"
            :width="isMobile ? 55 : 220">
            <template #default="scope">
                <slot name="operate" :scope="scope"></slot>
                <ActionPopovers :width="isMobile ? 80 : 220" :actions="generateActions(scope.row)" />
            </template>
        </el-table-column> -->
    </el-table>
    <!-- 网格视图 -->
    <ul class="file_browser" v-else :style="{ maxHeight: maxHeight }">
        <li class="file_item" :class="{ 'file_item_active': item.active }" v-for="(item, index) in data" :key="index"
            @click="handleClick(item)">
            <div class="file_item_top">
                <div class="file_item_checkbox">
                    <div class="checkbox">
                        <span v-show="item.active" class="iconfont icon-xuanzhong"></span>
                    </div>
                </div>
                <span class="iconfont typeIcon" :class="index === 0 ? 'icon-gf24-folder' : 'icon-wenjian1'" />
            </div>
            <div class="file_item_button flexSBCenter">
                <EllipsisText :text="item.name" />
                <ActionPopovers :width="isMobile ? 80 : 220" :actions="generateActions(item)" />
            </div>
        </li>
        <li class="noData" v-if="data.length === 0"><el-empty description="暂无数据" /></li>
    </ul>
</template>

<script setup lang="ts">

import { ref, watch } from 'vue';
import EllipsisText from '@/components/common/EllipsisText.vue';
import ActionPopovers from '@/components/common/ActionPopovers.vue';
import type { ElTable } from 'element-plus';
// import type { AssetMetadata } from '@/types/AssetMetadata';
import { useStore } from '@/stores';
import { useRouter } from 'vue-router';

const router = useRouter();
const store = useStore();
const isMobile = ref(store.isMobile);
const maxHeight = isMobile.value ? 'calc(100vh - 160px)' : 'calc(100vh - 180px)';
defineProps({
    data: {
        type: Array as () => any[], // 表格数据类型
        default: () => [], // 默认值为空数组
    },

     key:{
       type: Number, // 表格数据类型
       default: 1, // 默认值为空数组
     },
    // maxHeight: {
    //     type: String,
    //     default: "",
    // },
    generateActions: {
        type: Function,
        required: true, // 用于生成操作项的函数
    },
});

const emit = defineEmits(['update:selection']);
// 状态管理方法
const setDetail = (value: any) => store.setDetail(value);
// 多选状态管理
const multipleSelection = ref<any[]>([]);
const handleSelectionChange = (val: any[]) => {
    val.forEach((item) => {
        item.active = true;
    });
    multipleSelection.value = val;
    updateSelection();
};

// 表格行点击处理
const tableRef = ref<InstanceType<typeof ElTable>>();
const handleRowClick = (row: any, event: any) => {
    row.active = !row.active;
    // 判断事件源是否是操作列中的元素
    if (event.className == "tableOperate") {
        return;
    }
    // 切换当前行的选中状态
    tableRef.value?.toggleRowSelection(row, !multipleSelection.value.includes(row));

    if (store.detailItem) {
        setDetail(row)
    }
};

// 网格视图单项点击处理
const handleClick = (item: any) => {
    item.active = !item.active;
    if (item.active) {
        multipleSelection.value.push(item);
    } else {
        multipleSelection.value = multipleSelection.value.filter(
            (item) => item.namespaceId !== item.namespaceId,
        );
    }
    updateSelection();
};

// 更新选中项
const updateSelection = () => emit('update:selection', [...multipleSelection.value]);

watch(() => store.getViewType, (value) => {
    if (value === 1) {
        const currentRoute = router.currentRoute.value;
        router.push({ path: '/redirect' }).then(() => router.push(currentRoute.fullPath));
    }
}
);
</script>

<style scoped lang="scss">
.tables {
    width: 100%;

    :deep(.tableOperate) {
        .cell {
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }

    }
}

.file_browser {
    display: flex;
    flex-wrap: wrap;
    /* 允许换行 */
    gap: 10px;
    max-width: 100%;
    overflow-y: auto;

    /* 最大宽度限制 */
    .file_item {
        flex: 1 1 calc(25% - 20px);
        /* 初始每行4个，减去gap的影响 */
        min-width: 300px;
        /* 设置最小宽度 */
        background-color: #ffffff;
        border: 1px solid #ddd;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        text-align: center;
        padding: 10px;
        transition: transform 0.2s ease-in-out;
        border-radius: 5px;
        cursor: pointer;

        .file_item_top {
            position: relative;

            .file_item_checkbox {
                position: absolute;
                border-radius: 5px;
                height: 21px;
                width: 21px;
                border: 2px solid #788dab;

                .checkbox {
                    .iconfont {
                        font-size: 13px;
                        position: absolute;
                        left: 0;
                        right: 0;
                    }
                }

            }

            .typeIcon {
                font-size: 100px;
                margin-bottom: 10px;
            }

            .icon-gf24-folder {
                color: #4d7eaf;
            }

            .icon-wenjian1 {
                color: #041e42;
            }
        }


        .text {
            text-align: left;
            overflow: hidden;
            text-overflow: ellipsis;
            vertical-align: middle;
            white-space: nowrap;
            margin-right: 10px;
        }
    }

    .file_item:hover {
        // transform: scale(1.01);
        // border: 2px solid #80a7d7;
        background-color: #fbfbfb;
    }

    .file_item_active {
        border: 2px solid #80a7d7;
    }

    .noData {
        margin: auto;
    }
}
</style>